<template>

  <div class="app-container">

    <h2 style="text-align: center;">发布新课程</h2>

    <el-steps :active="1" process-status="wait" align-center style="margin-bottom: 40px;">
      <el-step title="填写课程基本信息"/>
      <el-step title="创建课程大纲"/>
      <el-step title="最终发布"/>
    </el-steps>

    <el-form label-width="120px">

      <el-form-item label="课程标题">
        <el-input v-model="courseInfo.title" placeholder=" 示例：机器学习项目课：从基础到搭建项目视频课程。专业名称注意大小写"/>
      </el-form-item>

      <!-- 所属分类 -->
      <el-form-item label="一级分类">
        <el-select v-model="courseInfo.subjectParentId" placeholder="请选择一级分类">
          <el-option v-for="item in subjectOneList" :key="item.id" :label="item.title" :value="item.id"></el-option>
        </el-select>
        <el-select v-model="courseInfo.subjectId" placeholder="请选择二级分类">
          <el-option v-for="item in subjectTwoList" :key="item.id" :label="item.title" :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <!-- 课程讲师 -->
      <el-form-item label="课程讲师">
        <el-select v-model="courseInfo.teacherId" placeholder="请选择讲师">
          <el-option v-for="item in teacherList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="总课时">
        <el-input-number :min="0" v-model="courseInfo.lessonNum" controls-position="right" placeholder="请填写课程的总课时数"/>
      </el-form-item>

      <!-- 课程简介 -->
      <el-form-item label="课程简介">
        <tinymce ref="tinymce" :height="300" v-model="courseInfo.description"></tinymce>
        <!--<el-input v-model="courseInfo.description" controls-position="right" placeholder="请填写课程简介"/>-->
      </el-form-item>

      <!-- 课程封面 -->
      <el-form-item label="课程封面">
        <el-upload
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :action="BASE_API+'/eduoss/fileoss'"
          class="avatar-uploader">
          <img :src="courseInfo.cover">
        </el-upload>

      </el-form-item>

      <el-form-item label="课程价格">
        <el-input-number :min="0" v-model="courseInfo.price" controls-position="right" placeholder="免费课程请设置为0元"/> 元
      </el-form-item>

      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存并下一步</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import course from '@/api/edu/course';
  import teacher from '@/api/edu/teacher';
  import subject from '@/api/edu/subject'
  import tinymce from '@/components/Tinymce'

  let defaultForm = {
    id: '',
    title: '',
    teacherId: '',
    subjectId: '',
    subjectParentId: '',
    lessonNum: 0,
    price: '',
    cover: '/static/01.png',
    description: ''
  }
  export default {
    data() {
      return {
        saveBtnDisabled: false, // 保存按钮是否禁用
        BASE_API: process.env.BASE_API,
        courseInfo: defaultForm,
        // 当前操作是否为回显操作
        ifEcho: false,
        teacherList: [],
        subjectOneList: [],
        subjectTwoList: []

      }
    },

    created() {
      this.init();
      this.getAllTeacher();
      this.getOneSubject();
    },

    methods: {
      init() {
        // 1.回显的情况
        if (this.$route.params.id) {
          this.courseInfo.id = this.$route.params.id;
          course.getCourseInfo(this.courseInfo.id).then(res => {
            // 将这个值改为true，表示在赋值时进行的是回显操作
            this.ifEcho = true;
            setTimeout(() => {
              this.courseInfo = res.data.course;
            }, 100)
          })
        } else {
          // 2.新增的情况
          this.courseInfo = { ...defaultForm };
          // 由于init方法是在create钩子函数中执行的，所以此时dom元素仍未渲染，如果要调用tinymce中的方法就只有等dom元素渲染后才能执行，
          // 所以在这里使用$nextTick来延迟执行
          this.$nextTick(() => {
            // 调用tinymce中的setContent方法来将其中的值清空
            this.$refs.tinymce.setContent("");
          })
        }
      },
      saveOrUpdate() {
        console.log(this.courseInfo.id)
        if (this.courseInfo.id) {
          course.updateCourseInfo(this.courseInfo).then(res => {
            if (res.success) {
              this.$message({
                type: 'success',
                message: '更新成功'
              })
              this.$router.push({ path: `/course/chapter/${this.courseInfo.id}` })
            } else {
              this.$message({
                type: 'error',
                message: res.message
              })
            }
          })
        } else {
          course.addCourseInfo(this.courseInfo).then(res => {
            if (res.success) {
              this.$message({
                type: 'success',
                message: '添加成功'
              })
              this.$router.push({ path: `/course/chapter/${res.data.id}` })
            } else {
              this.$message({
                type: 'error',
                message: res.message
              })
            }
          })
        }

      },
      getAllTeacher() {
        teacher.findAll().then(res => {
          this.teacherList = res.data.items;
        })
      },
      /**
       * 获取所有一级分类
       */
      getOneSubject() {
        subject.getSubjectListPage().then(res => {
          this.subjectOneList = res.data.list;
        })
      },
      /**
       * 文件上传成功后的回调
       */
      handleAvatarSuccess(res, file) {
        this.courseInfo.cover = res.data.url;
      },
      /**
       * 文件上传前的回调，对文件的类型和大小进行限制
       */
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error("上传只能是.jpg格式的图片");
          return false;
        }
        if (!isLt2M) {
          this.$message.error("上传图片的大小不能超过2m");
          return false;
        }

        return true;

      }
    },
    watch: {
      'courseInfo.subjectParentId': function(val) {
        // 当整个course的数据赋值给页面上的courseInfo时，subjectParentId的值会修改，此时会由于监控的原因导致subjectId
        // 的值也跟着发生变化。为了防止这种情况，我们以ifEcho值为true时判断其为回显操作，此时我们要做的只是清空
        // 而ifEcho是false时，让系统认为下一次用户的操作不是回显操作；如果不是回显操作，那么就和前面的逻辑相同了
        if (val) {
          if (!this.ifEcho) {
            // 1.不是回显操作的时候，改变subjectParentId的值会将subjectId的值清空
            this.courseInfo.subjectId = '';
          } else {
            // 2.是回显操作的时候，subjectParentId改变时不清空subjectId，而是将ifEcho改为false，让下一次操作开始都不是回显操作
            this.ifEcho = false;
          }
          let list = this.subjectOneList.filter(item => item.id === val);
          this.subjectTwoList = list[0].children;
        }
      },
      $route() {
        this.init();
      }
    },
    components: {
      tinymce
    }
  }
</script>

<style scoped>
  .tinymce-container {
    line-height: 29;
  }
</style>
